<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>

    <title>element-ui</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        .element-app-box {
            padding: 15px;
        }

        .el-table th.jo-el-table-header {
            background-color: #F5F7FA;
        }
    </style>
    <style>

        /*jo-el表格栏*/
        .jo-el-table-bar {
            /*background-color: red;*/
        }

        /*jo-el表格栏-表格数据栏*/
        .jo-el-table-data-bar {
            background-color: blue;
        }

        /*jo-el表格栏-分页栏*/
        .jo-el-table-page-bar {
            padding: 5px 5px;
            /*background-color: #eeeeee;*/
            border: #EBEEF5 solid 1px;
            border-top: none;
        }
    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box">
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-form :inline="true" :model="searchCondition">
                    <el-form-item label="表名">
                        <el-input v-model="searchCondition.tableName" placeholder="表名"></el-input>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-input v-model="searchCondition.author" placeholder="作者"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toSearch"><i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-button type="primary">新建代码配置</el-button>
                <el-button type="success">备份(导出配置)</el-button>
                <el-button type="info">恢复(导入配置)</el-button>
                <el-button type="danger">删除</el-button>
                <el-button type="warning" onclick="window.location.reload()">刷新</el-button>
            </div>
        </el-col>
    </el-row>
<!--        <el-row :gutter="15">-->
<!--            <el-col :span="24">-->
<!--                <div class="grid-content">-->

<!--                    <div class="jo-el-table-bar">-->
<!--                        <div class="jo-el-table-data-bar">-->
<!--                            <el-table :data="tableDataWrapper" border style="width: 100%" header-cell-class-name="jo-el-table-header">-->
<!--                                <el-table-column type="selection" width="50" header-align="center" align="center"></el-table-column>-->
<!--                                <el-table-column prop="tableName" label="表名" width=""></el-table-column>-->
<!--                                <el-table-column prop="tableRemark" label="表说明" width=""></el-table-column>-->
<!--                                <el-table-column prop="savePath" label="保存路径"></el-table-column>-->
<!--                                <el-table-column prop="name" label="备注"></el-table-column>-->
<!--                                <el-table-column prop="savePath" label="保存路径"></el-table-column>-->
<!--                                <el-table-column label="操作" width="">-->
<!--                                    <el-button type="danger" size="small">删除</el-button>-->
<!--                                </el-table-column>-->
<!--                            </el-table>-->
<!--                        </div>-->
<!--                        <div class="jo-el-table-page-bar">-->
<!--                            <el-pagination-->
<!--                                    :currentPage="pageParam.pageNumber"-->
<!--                                    :page-sizes="pageParam.pageSizes"-->
<!--                                    :page-size="pageParam.pageSize"-->
<!--                                    :total="pageParam.total"-->
<!--                                    :layout="pageParam.layout"-->
<!--                                    :background="true"-->
<!--                                    :hide-on-single-page="pageParam.hideOnSinglePage"-->
<!--                                    @size-change="handleSizeChange"-->
<!--                                    @current-change="goPage"-->
<!--                                    @prev-click="goPage"-->
<!--                                    @next-click="goPage"-->
<!--                                    class=""-->
<!--                            >-->
<!--                            </el-pagination>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </el-col>-->
<!--        </el-row>-->
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <jo-el-table url="{URL_CMS}cms/genMain/getPage" :cols="cols" :callbacks="callbacks"></jo-el-table>
            </div>
        </el-col>
    </el-row>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<script type="text/javascript">

    const app = Vue.createApp({
        data: function () {
            return {
                // 查询url
                searchUrl: '{URL_CMS}cms/genMain/getPage',
                // 查询参数
                searchCondition: {},
                // 表格数据
                tableData: [],
                // 表格配置
                tableConfig: {},
                // 分页参数
                pageParam: {
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizes: [10, 20, 50, 100],
                    total: 0,
                    layout: 'total, sizes, prev, pager, next',   //, jumper
                    hideOnSinglePage: false
                },
                callbacks: {
                    // 渲染表格数据前通过该方法处理数据项
                    handleItem: function (oItem, iIdx) {

                    },
                    // 构造查询参数
                    paramBuild: function () {
                        return {};
                    },
                    // 查询参数处理
                    paramHandle: function (param) {

                    }
                },
                cols: [
                    {
                        field: 'tableName',
                        label: '表名',
                        type: 'selection',
                        width: 50,
                        headerAlign: 'center',
                        align: 'center'
                    }
                    , {field: 'tableName', label: '表名'}
                    , {field: 'tableRemark', label: '表说明'}
                    , {field: 'savePath', label: '保存路径'}
                    , {field: 'name', label: '备注'}
                    , {field: 'savePath', label: '保存路径'}
                ],
            }
        }
        , computed: {
            // 表格数据包装
            tableDataWrapper() {
                var list = this.tableData;
                var arr = [];
                if (list && list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        var item = list[i];
                        if (typeof this.callbacks.handleItem == 'function') {
                            this.callbacks.handleItem(item, i);
                        }
                        arr.push(item);
                    }
                }
                return arr;
            }
        }
        , methods: {
            // 查询
            toSearch() {
                this.goPage(1);
            },
            // 页大小变更
            handleSizeChange(pageSize) {
                this.searchInvoke({pageNumber: 1, pageSize: pageSize});
            },
            // 去第n页
            goPage(pageNumber) {
                this.searchInvoke({pageNumber: pageNumber});
            },
            // 数据查询执行核心方法
            searchInvoke(extParam) {
                var _this = this;
                // 构造查询参数, 包括表单参数和分页参数等
                var param = _this.buildSearchParam(extParam);
                jo.postAjax(_this.searchUrl, param, function (json) {
                    if (json && json.code === 0) {
                        _this.tableData = json.data;
                        _this.pageParam.pageNumber = json.pageNumber;
                        _this.pageParam.pageSize = json.pageSize;
                        _this.pageParam.total = json.total;
                    }
                }, true);
            },
            // 构造查询参数
            buildSearchParam(extParam) {
                // 用户输入的查询条件
                var param = jo.copyObject(this.searchCondition);
                // 分页参数
                param.pageNumber = this.pageParam.pageNumber;
                param.pageSize = this.pageParam.pageSize;
                // 指定的扩展参数, 和上面参数重复的, 以扩展参数为准, 可以用来参数校准
                if (extParam) {
                    param = jo.mergeObject(param, extParam);
                }
                // 参数处理钩子
                if (typeof this.callbacks.handleSearchParam == 'function') {
                    this.callbacks.handleSearchParam(param);
                }
                return param;
            }
        }
        , mounted() {
            this.toSearch();
        }
        , setup() {

        }
    });
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});


    app.component('jo-el-table', {
        // 可以接受的属性
        props: ['url', 'cols', 'callbacks', 'paramBuildFunc', 'paramHandleFunc'],
        data: function () {
            return {
                // url: '',
                tableData: [],
                // cols: [
                //     {field: 'tableName', label: '表名', type: 'selection', width: 50, headerAlign: 'center', align: 'center'}
                //     , {field: 'tableName', label: '表名'}
                //     , {field: 'tableRemark', label: '表说明'}
                //     , {field: 'savePath', label: '保存路径'}
                //     , {field: 'name', label: '备注'}
                //     , {field: 'savePath', label: '保存路径'}
                // ],
                page: {
                    pageNumber: 1,
                    pageSize: 10,
                    pageSizes: [2, 10, 20, 50, 100],
                    total: 0,
                    layout: 'total, sizes, prev, pager, next',   //, jumper
                    hideOnSinglePage: false
                }
            };
        },
        template: `
            <div class="jo-el-table-bar">
                <div class="jo-el-table-data-bar">
                    <el-table :data="tableData" border header-cell-class-name="jo-el-table-header">
                        <el-table-column v-for="col in cols" :type="col.type" :prop="col.field" :label="col.label"
                        :width="col.width" :header-align="col.headerAlign" :align="col.align">
                            <template v-if="col.html"></template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="jo-el-table-page-bar">
                    <el-pagination
                            :currentPage="page.pageNumber"
                            :page-sizes="page.pageSizes"
                            :page-size="page.pageSize"
                            :total="page.total"
                            :layout="page.layout"
                            :background="true"
                            :hide-on-single-page="page.hideOnSinglePage"
                            @size-change="handleSizeChange"
                            @current-change="goPage"
                            class=""
                    >
                    </el-pagination>
                </div>
            </div>
        `,
        methods: {
            // 页大小变更
            handleSizeChange(pageSize) {
                this.searchInvoke({pageNumber: 1, pageSize: pageSize});
            },
            // 去第n页
            goPage(pageNumber) {
                if (!pageNumber) {
                    console.info('pageNumber重置为1');
                    pageNumber = 1;
                }
                this.searchInvoke({pageNumber: pageNumber});
            },
            // 数据查询执行核心方法
            searchInvoke(extParam) {
                var _this = this;
                // 构造查询参数, 包括表单参数和分页参数等
                var param = _this.buildSearchParam(extParam);
                jo.postAjax(_this.url, param, function (json) {
                    if (json && json.code === 0) {
                        var list = json.data;
                        for (var i = 0; i < list.length; i++) {
                            var item = list[i];
                            if (_this.callbacks && typeof _this.callbacks.handleItem == 'function') {
                                _this.callbacks.handleItem(item, i);
                            }
                        }
                        _this.tableData = json.data;
                        _this.page.pageNumber = json.pageNumber;
                        _this.page.pageSize = json.pageSize;
                        _this.page.total = json.total;
                    } else {
                        jo.log('查询数据失败', json);
                    }
                }, true);
            },
            // 构造查询参数
            buildSearchParam(extParam) {
                var param;
                // 用户输入的查询条件
                if (this.callbacks && typeof this.callbacks.paramBuild == 'function') {
                    param = this.callbacks.paramBuild();
                }
                if (!param) {
                    param = {};
                }
                // 分页参数
                param.pageNumber = this.page.pageNumber;
                param.pageSize = this.page.pageSize;
                // 指定的扩展参数, 和上面参数重复的, 以扩展参数为准, 可以用来参数校准
                if (extParam) {
                    param = jo.mergeObject(param, extParam);
                }
                // 参数处理钩子
                if (this.callbacks && typeof this.callbacks.paramHandle == 'function') {
                    this.callbacks.paramHandle(param);
                }
                return param;
            }
        },
        mounted() {
            this.goPage(1);
            console.info('[jo-el-table] mounted');
        }
    });


    var appVM = app.mount("#app");
</script>

</body>
</html>
